<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 忽略页面中的数字识别为电话号码,email识别 -->
    <meta name="format-detection" content="telephone=no, email=no"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <title>我的订单</title>

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/mui.min(2).css"/>

    <style>

        .body {
            font-family: "微软雅黑";
            border: none;

        }

        .mui-content {
            background-color: white;
            margin-top: 50px;
        }

        .header {
            height: 50px;
            line-height: 50px;
            background-color: white;

        }

        .bianhao {
            color: black;
            letter-spacing: 2px;
            font-size: 18px;
            appearance: none;
        }

        .bianhao option {
            appearance: none;
            height: 100px;
        }

        .right {
            padding: 10px;
        }

        .opiton {
            width: 414px;
            height: 200px;
            position: fixed;
            top: 0px;
            left: 0px;
            display: none;
            background: white;
        }

        .opiton ul {
            list-style: none;
            padding-left: 20px;
            margin: 0px;

        }

        .opiton ul li {
            border-bottom: 1px solid #F0F0F0;
        }

        .typeOrder:hover {
            color: red;
        }

        .typeOrder1:hover {
            color: red;
        }

        .typeOrder2:hover {
            color: red;
        }

        .typeOrder3:hover {
            color: red;
        }

        .huise {
            width: 414px;
            height: 736px;
            background-color: #272822;
            opacity: 0.6;
            position: fixed;
            top: 48px;
            z-index: 100;
            display: none;
        }

        .dianpu2 {
            color: #000000;
            letter-spacing: 2px;
            font-size: 17px;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-right: 15px;
            padding-left: 15px;
        }

        .dianpu2 img {
            margin-right: 10px;
        }

        .dianpu2 span {
            float: right;
            color: #FE4543;
            font-size: 15px;
        }

        .titile1 {
            width: 240px;
            margin-left: 140px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .img {
            color: red;
            float: left;
            margin-left: 15px;
        }

        .num1 {
            width: 240px;
            margin-left: 140px;
            margin-top: 10px;
        }

        .zuihou {
            width: 240px;
            text-align: right;
            color: #A2A2A2;
            font-size: 16px;
            margin-top: 25px;
            margin-left: 140px;
            padding-bottom: 10px;
        }
        #item1mobile, #item2mobile, #item3mobile, #item4mobile {
            background-color: #EFEFF4;
        }

    </style>

</head>
<body class="body">
<!--头部开始-->
<form action="" id="dingdanForm">
    <nav class="container-fluid header navbar-fixed-top">
        <div class="row">
            <a href="javascript:history.go(-1)">
                <div class="col-xs-1 text-right right">
                    <svg t="1588050361008" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="5675" width="26" height="33">
                        <path d="M771.072 105.472 715.776 51.2 242.688 512 715.776 972.8 771.072 918.528 354.304 512Z"
                              p-id="5676" fill="#2c2c2c"></path>
                    </svg>
                </div>
            </a>
            <div class="col-xs-10 text-center center">
                <!-- <select class="bianhao">
                     <option>邻里购订单</option>
                     <option>手机充值订单</option>
                     <option>邻里优家订单</option>
                     <option>拎包入住订单</option>

                 </select>-->
                <span class="bianhao" onclick="select()">邻里购订单</span>

            </div>
        </div>
        <div style="" class="opiton">
            <ul>
                <li class="typeOrder1" onclick="order1change()">邻里购订单</li>
                <li class="typeOrder" onclick="orderchange()">手机充值订单</li>
                <li class="typeOrder2" onclick="order2change()">邻里优家订单</li>
                <li class="typeOrder3" onclick="order3change()">拎包入住订单</li>
            </ul>

        </div>
        <input type="hidden" class="orderTypeId" name="orderTypeId"/>
    </nav>
</form>

<div class="huise">

</div>

<!--内容开始 选择（全部、待付款、待收货、待评价）-->
<div class="mui-content">
    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl"
             class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item" href="#item1mobile">
                全部
            </a>
            <a class="mui-control-item" href="#item2mobile">
                待付款
            </a>
            <a class="mui-control-item" href="#item3moselect bile">
                待收货
            </a>
            <a class="mui-control-item" href="#item4mobile">
                待评价
            </a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active" style="height: 1050px;">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" id="orderBody" style="background-color: #EFEFF4;">
                            <#list shopList as orde>
                            <li class="mui-table-view-cell yige" style="padding: 0px;background-color:white;width:395px;margin: 0px auto;margin-top: 10px;">
                                <p class="dianpu2"><img src="img/商城.png"
                                                        width="20px;">邻里邦<span>${orde.orderStatus}</span></p>
                                <p class="img"><img src="img/${orde.shopImg}" width="100px"></p>
                                <p class="titile1">${orde.shopName}</p>
                                <p class="num1" style="">￥<strong class="price">${orde.shopPrice}</strong><span
                                        style="float: right;">x<lable class="numa">${orde.orderUme}</lable></span></p>
                                <p class="zuihou">共<span class="jijian">${orde.orderUme}</span>件<span
                                        style="margin-left: 15px;color: black;font-size: 16px;">商品小计：￥<span
                                        style="color: #FE4543;" class="totalPrice">${orde.orderPrice}</span></span></p>
                            </li>
                        </#list>

                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content" style="height:1050px ;">
                <div id="scroll2" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content" style="height:1050px ;">
                <div id="scroll3" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div id="item4mobile" class="mui-slider-item mui-control-content" style="height:1050px ;">
                <div id="scroll4" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>


<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script>
    /*$(function(){
        $(".typeOrder")
    })*/

    function select() {
        $(".opiton").slideToggle();
        $(".huise").show();
        /*
            $(".typeOrder").css('color':'red');*/
    }


    function orderchange() {
        $(".bianhao").text($(".typeOrder").text());
        $(".opiton").slideToggle();
        $(".huise").hide();
        $(".orderTypeId").val(2);
        /*
            $(".typeOrder").css('color':'red');*/
        $.ajax({
            url: "/Neugh/order/myorder?orderTypeId="+2,
            dataType: "json",
            method: "get",
            success: function (data) {
                console.log(data)
                $("#orderBody").html("");
                let str = "";
                $(data).each(function (index, orde) {
                    console.log(orde)
                    var status=orde.orderStatus;
                    var li='<li class="mui-table-view-cell yige" style="padding: 0px;background-color:white;width: 96%;margin: 0px auto;margin-top: 10px;">';
                    li += ' <p class="dianpu2">充值订单号<span>'+orde.orderNum+'</span><span>'+orde.orderStatus  +'</span></p>';
                    li += ' <p class="img"><img src="img/shoujichongzhi.jpg" width="80px"></p>';
                    //li += '   <p class="titile1">'+orde.shopName+'</p>';
                    li += '   <p class="num1" style="">充值金额&nbsp;&nbsp;￥<strong class="price">'+orde.orderPrice+'</strong></p>';
                    li += '  <p class="" style="margin-left: 140px;">充值号码&nbsp;&nbsp;<span class="jijian">'+orde.rphone+'</span><br/><span';
                    li += '          >下单时间：<span';
                    li += '           class="totalPrice">'+orde.orderTime+'</span></span></p></li>';

                    str += li;

                });
                console.log(str)
                $("#orderBody").html(str);
            }, error(err) {
                alert("请求失败！")
            }
        })
    }

    function a(orde) {
        return orde.orderStatus;
    }

    function order1change() {
        $(".bianhao").text($(".typeOrder1").text());
        $(".opiton").slideToggle();
        $(".huise").hide();
        $(".orderTypeId").val(1);
        $.ajax({
            url: "/Neugh/order/myorder?orderTypeId=" + 1,
            dataType: "json",
            method: "get",
            success: function (data) {
                $("#orderBody").html("");
                let str = "";
                $(data).each(function (index, orde) {
                    console.log(orde);
                    var status=orde.orderStatus;
                    var li='<li class="mui-table-view-cell yige" style="padding: 0px;background-color:white;width: 96%;margin: 0px auto;margin-top: 10px;">';
                    li += ' <p class="dianpu2"><img src="img/商城.png" width="20px;">邻里邦<span>'+orde.orderStatus+'</span></p>';
                    li += ' <p class="img"><img src="img/'+orde.shopImg+'" width="100px"></p>';
                    li += '   <p class="titile1">'+orde.shopName+'</p>';
                    li += '   <p class="num1" style="">￥<strong class="price">'+orde.shopPrice+'</strong><span';
                    li += '           style="float: right;">x<lable class="numa">'+orde.orderUme+'</lable></span></p>';
                    li += '  <p class="zuihou">共<span class="jijian">'+orde.orderUme+'</span>件<span';
                    li += '          style="margin-left: 15px;color: black;font-size: 16px;">商品小计：￥<span';
                    li += '           style="color: #FE4543;" class="totalPrice">'+orde.orderPrice+'</span></span></p></li>';

                    str += li;
                });
                $("#orderBody").html(str);
            }, error(err) {
                alert("请求失败！")
            }
        })
    }

    function order2change() {
        $(".bianhao").text($(".typeOrder2").text());
        $(".opiton").slideToggle();
        $(".huise").hide();
        $(".orderTypeId").val(4);
    }

    function order3change() {
        $(".bianhao").text($(".typeOrder3").text());
        $(".opiton").slideToggle();
        $(".huise").hide();
        $(".orderTypeId").val(3);
    }

</script>

</body>
</html>